<template>
	<div class="custom">
		<template v-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
			<div>
				<h1>
					<label>{{ extension.title }}</label>
					<a v-if="extension.hyperlinks_text" :href="extension.hyperlinks_text.value"
						target="view_window">{{ extension.hyperlinks_text.key }}</a>
				</h1>
				<ul v-if="extension.item && extension.item.length > 0">
					<li v-for="(item, index) in extension.item" :key="index">
						<a v-if="isUrl(item.value)" :href="item.value" target="view_window">{{ item.key }}</a>
						<p v-else>
							{{ item.key }}
						</p>
					</li>
				</ul>
				<article>{{ extension.description }}</article>
			</div>
		</template>
		<template v-else-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
			<div class="evaluate">
				<h1>{{ TUITranslateService.t("message.custom.对本次服务评价") }}</h1>
				<ul class="evaluate-list">
					<li v-for="(item, index) in Math.max(isCustom.score, 0)" :key="index" class="evaluate-list-item">
						<Icon :file="star" class="file-icon" />
					</li>
				</ul>
				<article>{{ isCustom.comment }}</article>
			</div>
		</template>
		<template v-else-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
			<div class="order" @click="openLink(isCustom.link)">
				<img :src="isCustom.imageUrl">
				<main>
					<h1>{{ isCustom.title }}</h1>
					<p>{{ isCustom.description }}</p>
					<span>{{ isCustom.price }}</span>
				</main>
			</div>
		</template>
		<template v-else-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
			<div class="textLink">
				<p>{{ isCustom.text }}</p>
				<a :href="isCustom.link" target="view_window">{{
          TUITranslateService.t("message.custom.查看详情>>")
        }}</a>
			</div>
		</template>
		<template v-else-if="isCustom.businessID === 'text_link'">
			<div class="textLink">
				<p>{{ isCustom.text }}</p>
				<a :href="isCustom.link" target="view_window">
					{{
	        TUITranslateService.t("message.custom.查看详情>>")
	      }}
				</a>
			</div>
		</template>
		<template v-else-if="isCustom.businessID === 'pay'">
			<div class="order-main">
				<div class="main-title">{{ isCustom.positionName }}</div>
				<div class="main-desc">
					<div class="desc-item">{{ isCustom.money }}/单</div>
					<div class="desc-item">{{ isCustom.salarySettleType }}</div>
					<div class="desc-item">共{{ isCustom.num }}单</div>
				</div>
				<div class="main-money">
					<div class="money-name">结算薪资:</div>
					<div class="money-num">
						￥{{(Number(isCustom.money)?Number(isCustom.money):0)*(Number(isCustom.num)?Number(isCustom.num):1)}}
					</div>
				</div>
				<div class="main-btn" @click="jumpLook">查看</div>
			</div>
		</template>
		<template v-else-if="isCustom.businessID === 'seek'">
			<div class="order-main">
				<div class="main-title">{{ isCustom.positionName }}</div>
				<div class="main-desc">{{ isCustom.requireSkill }}</div>
				<div class="main-btn" @click="jumpZx">查看</div>
			</div>
		</template>
		<template v-else-if="isCustom.businessID === 'qiang'">
			<div class="order" @click="navTo(isCustom.path)">
				<img :src="isCustom.imageUrl">
				<main>
					<h1>{{ isCustom.title }}</h1>
					<p>{{ isCustom.content }}</p>
					<span>{{ isCustom.userName }}</span>
				</main>
			</div>
		</template>
		<!-- 店铺 -->
		<template v-else-if="isCustom.businessID === 'shop'">
			<div class="shop">
				<div class="top">
					<div class="leftImg" :style="'background:url('+isCustom.imageUrl+') no-repeat;'">
					</div>
					<div class="rightText">
						<p>{{isCustom.title}}</p>
						<p>{{isCustom.price}}</p>
					</div>
				</div>
				<div class="bot">
					<p @click="shopClick(isCustom)">去查看</p>
				</div>
			</div>
		</template>
		<!-- 订单 -->
		<template v-else-if="isCustom.businessID === 'order1'">
			<div class="order1" @click="navOrder(isCustom.sonOrderNo)">
				<div class="top">
					订单号：{{isCustom.sonOrderNo}}

				</div>
				<div class="bot">
					<div class="leftImg">
						<img :src="isCustom.imageUrl" alt="" />
					</div>
					<div class="rightText">
						<p>{{isCustom.productName}}</p>
						<p>{{isCustom.specName}}（{{isCustom.specValue}}）</p>
						<div class="attr">
							<span  v-for="(item2,index2) in isCustom.attrs || []" :key="index2">{{item2.propertyName}}：{{item2.propertyValue}};</span>
						</div>
						<p>{{isCustom.price}}</p>
					</div>
				</div>

			</div>
		</template>
		<!-- 职位详情 -->
		<template v-else-if="isCustom.businessID === 'position'">
			<div class="position-main" @click="jumpDetail(isCustom.datas.appPublishPosition.id)">
				<div class="main-top">
					<div class="top-title">{{ isCustom.datas.appPublishPosition.positionName }}</div>
					<div class="top-money">{{ convertToK(isCustom.datas.appPublishPosition.salaryMin) }} -
						{{ convertToK(isCustom.datas.appPublishPosition.salaryMax) }}</div>
				</div>
				<div class="main-desc">{{ isCustom.datas.appPublishPosition.workPositionDesc }}</div>
				<div class="main-boder">
					<view class="border-item">{{ setName(isCustom.datas.appPublishPosition.workAddressType) }}</view>
					<view class="border-item">{{ setFs(isCustom.datas.appPublishPosition.salarySettleType) }}</view>
				</div>
				<div class="main-info">
					<div class="info-user">
						<image :src="httpUrl+'/app/file/viewFile?fileId='+isCustom.datas.appUser.avatarId" mode="">
						</image>
						<text>{{ isCustom.datas.appUser.userName }}·已认证</text>
					</div>
					<div class="info-time">{{ isCustom.datas.appPublishPosition.createTime }}</div>
				</div>
			</div>

		</template>
		<!-- 需求 -->
		<template v-else-if="isCustom.businessID === 'demand'">
			<div @click="navDemand(isCustom.path)" class="customizeAcknowledgmentBox">
				<div class="left">
					<image
						:src="isCustom.imageUrl"
						mode="aspectFill"></image>
				</div>
				<div class="right">
					{{isCustom.title}}
					<p class="price">
						{{isCustom.price}}{{isCustom.pricingUnit?'/'+isCustom.pricingUnit:''}}<span>{{isCustom.number}}{{isCustom.pricingUnit}}</span>
					</p>
				</div>
			</div>
		
		</template>
		<template v-else>
			<span v-html="content.custom" />
		</template>
	</div>
</template>

<script lang="ts" setup>
	import { watchEffect, ref, onMounted } from '../../../../adapter-vue';
	import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
	import { isUrl, JSONToObject } from '../../../../utils/index';
	import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
	import { ICustomMessagePayload } from '../../../../interface';
	import Icon from '../../../common/Icon.vue';
	import star from '../../../../assets/icon/star-light.png';
	import api from '@/utils/api/recruit.js'
	import { convertToK } from '@/utils/common/common.js'
	import { onLoad, onUnload } from '@dcloudio/uni-app';
	onMounted(_ => {
		// getDetails()
	})
	const mesType = ref<string>('')
	onLoad(res => {
		mesType.value = res.messageType
	})

	interface Props {
		messageItem : IMessageModel;
		content : any;
	}

	const props = withDefaults(defineProps<Props>(), {
		messageItem: undefined,
		content: undefined,
	});
	const httpUrl = getApp().globalData.baseUrl
	const custom = ref();
	const message = ref<IMessageModel>();
	const extension = ref();
	const isCustom = ref<ICustomMessagePayload>({
		businessID: '',
	});
	// 职位信息
	const jonInfo = ref<object>({})
	watchEffect(() => {
		console.log(custom.value, '=custom.value');
		custom.value = props.content;
		message.value = props.messageItem;
		const { payload } = props.messageItem;
		isCustom.value = payload.data || '';
		isCustom.value = JSONToObject(payload.data);
		if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
			extension.value = JSONToObject(payload.extension);
		}
	});
	const shopClick = (item) => {
		//以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面
		let page = getCurrentPages();
		let prevpage = page[page.length - 2]; //上一个页面对象
		console.log(prevpage.route, ' prevpage.route')
		if (prevpage.route == 'pages/lifestyleProducts/index') {
			//返回上一个界面
			uni.navigateBack()
		} else {
			uni.navigateTo({
				url: '/pages/lifestyleProducts/index?id=' + item.id
			})
		}
	}
	// 跳转职位详情
	const jumpDetail = id => {
		let datas = {
			type: 3,
			id: id
		}
		uni.navigateTo({ url: `/pages/positionManagement/detail?data=${JSON.stringify(datas)}` })
	}
	const navOrder = (sonOrderNo)=>{
		uni.navigateTo({
			url:'/pages/orderDetails/index?id='+sonOrderNo+'&type=1'
		})
	}
	// 需求跳转
	const navDemand = (url)=>{
		uni.navigateTo({
			url
		})
	}
	const openLink = (url : any) => {
		window.open(url);
	};
	const fukuan = () => {
		uni.showModal({
			title: '请付款'
		})
	}
	const navTo = (path : string) => {
		uni.navigateTo({
			url: path
		})
	}
	// 获取职位详情
	const getDetails = async _ => {
		console.log(isCustom);
		const res = await api.viewPublishPosition(isCustom.value.zId)
		jonInfo.value = res.data
	}
	// 跳转详情页面
	const jumpZx = _ => {
		uni.navigateTo({
			url: '/pages/jobHunting/seekDetail?id=' + isCustom.value.positionId
		})
	}
	const setName = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'OFFLINE':
				return '线下';
			case 'ONLINE':
				return '线上';
			default:
				return '未知';
		}
	}
	const setFs = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'SINGLE_SETTLEMENT':
				return '单结';
			case 'DAILY_SETTLEMENT':
				return '日结';
			case 'MONTHLY_SETTLEMENT':
				return '月结';
			default:
				return '未知';
		}
	}
	// 跳转查看
	const jumpLook = _ => {
		if (mesType.value === 'boss') {
			uni.navigateTo({ url: '/pages/parttimeJob/parttimeJob' })
		} else {
			uni.navigateTo({ url: '/pages/myParttimeJob/myParttimeJob' })
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../../../assets/styles/common";

	a {
		color: #679ce1;
	}

	.custom {
		font-size: 14px;

		h1 {
			font-size: 14px;
			color: #000;
		}

		h1,
		a,
		p {
			font-size: 14px;
		}

		.evaluate {
			ul {
				display: flex;
				padding: 10px 0;
			}

			&-list {
				display: flex;
				flex-direction: row;

				&-item {
					padding: 0 2px;
				}
			}
		}

		.order1 {
			.bot {
				display: flex;
				.leftImg {
					// width: 70px;
					// height: 70px;
					// border-radius: 8px;
					// background-size: 100% 100%;
					img{
						width: 70px;
					}
				}

				.rightText {
					padding-left: 5px;
					width: 145px;

					>p:nth-of-type(1) {
						font-size: 12px;
						color: #000000;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						/* 设置超出的行数 */
						overflow: hidden;
					}
					>p:nth-of-type(2){
						color:#8C8C8C;
						font-size: 12px;
					}
					.attr {
						span{
							font-size: 12px;
							color: #8C8C8C;
							margin-right: 10rpx;
						}
					}
					>p:nth-of-type(3) {
						color: #6B64D3;
						font-size: 12px;

						&:before {
							content: '￥';
							display: inline-block;
							margin-right: 2px;
							color: #6B64D3;
							font-size: 12px;
						}
					}
				}
			}

			.top {
				margin-bottom: 5px;
				font-size: 12px;
			}
		}

		.shop {
			.bot {
				display: flex;
				margin-top: 10px;
				justify-content: flex-end;

				p {
					width: 90px;
					line-height: 32px;
					text-align: center;
					color: #fff;
					border-radius: 32px;
					background: #6B64D3;
					font-size: 14px;
				}
			}

			.top {
				display: flex;
				align-items: flex-start;

				.leftImg {
					width: 70px;
					height: 70px;
					border-radius: 8px;
					background-size: 100% 100%;
				}

				.rightText {
					padding-left: 5px;
					width: 145px;

					p:nth-of-type(1) {
						font-size: 14px;
						color: #000000;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 设置超出的行数 */
						overflow: hidden;
					}

					p:nth-of-type(2) {
						margin-top: 3px;
						color: #6B64D3;
						font-size: 18px;

						&:before {
							content: '￥';
							display: inline-block;
							margin-right: 2px;
							color: #6B64D3;
							font-size: 12px;
						}
					}
				}
			}
		}

		.order {
			display: flex;

			main {
				padding-left: 5px;

				p {
					font-family: PingFangSC-Regular;
					width: 145px;
					line-height: 17px;
					font-size: 14px;
					color: #999;
					letter-spacing: 0;
					margin-bottom: 6px;
					word-break: break-word;
				}

				span {
					font-family: PingFangSC-Regular;
					line-height: 25px;
					color: #ff7201;
				}
			}

			img {
				width: 67px;
				height: 67px;
			}
		}

		.order-main {
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 1rpx solid rgba(107, 100, 211, 1);
			padding: 24rpx;
			box-sizing: border-box;
			background: #fff;

			.main-title {
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 36rpx;
				color: #262626;
				line-height: 54rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.main-desc {
				margin-top: 16rpx;
				display: flex;
				align-items: center;

				.desc-item {
					padding: 6rpx 16rpx;
					box-sizing: border-box;
					background: #E4E2FC;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 24rpx;
					color: #6B64D3;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.desc-item:not(:first-child) {
					margin-left: 12rpx;
				}
			}

			.main-money {
				margin-top: 25rpx;
				display: flex;
				align-items: center;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #F4F6FA;

				.money-name {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 24rpx;
					color: #262626;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.money-num {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #6B64D3;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 16rpx;
				}
			}

			.main-btn {
				display: flex;
				justify-content: flex-end;
				margin-top: 24rpx;
				width: 104rpx;
				height: 64rpx;
				background: #6B64D3;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}

		.position-main {
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 24rpx;
			box-sizing: border-box;

			.main-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top-title {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 36rpx;
					color: #262626;
					line-height: 54rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.top-money {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #6B64D3;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			.main-desc {
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #262626;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 16rpx;
			}

			.main-boder {
				margin-top: 16rpx;
				display: flex;
				align-items: center;

				.border-item {
					background: #F4F6FA;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 6rpx 16rpx;
					box-sizing: border-box;
				}

				.border-item:not(:last-child) {
					margin-right: 12rpx;
				}
			}

			.main-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 16rpx;

				.info-user {
					display: flex;
					align-items: center;
					width: 300rpx;

					image {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						flex-shrink: 0;
					}

					text {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #000000;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-left: 12rpx;
					}
				}

				.info-time {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #8C8C8C;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}
	
	.customizeAcknowledgmentBox {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		background-color: #fff;
		margin: 0 auto;
	
		.sending {
			position: absolute;
			right: 0;
			bottom: 0;
			font-size: 28rpx;
			padding: 5rpx 15rpx;
			border-radius: 20rpx;
			background-color: #E4E2FC;
			color: #6B64D3;
		}
	
		.left {
			width: 100rpx;
			height: 100rpx;
			border-radius: 16rpx;
			background: #ccc;
			margin-right: 30rpx;
	
			image {
				width: 100%;
				border-radius: 16rpx;
				height: 100%;
			}
		}
	
		.right {
			.price {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #6B64D3;
				margin-top: 10rpx;
				
				span {
					width: 70rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 8rpx;
					background: #E4E2FC;
					color: #6B64D3;
					font-size: 24rpx;
					margin-left: 12rpx;
				}
			}
		}
	}
</style>